<template>
  <div>
    <div class="flex-x">
      <div
        :style="{
          backgroundColor: item.color
        }"
        class="color_item"
        v-for="(item, index) in colorList"
        :key="index"
      ></div>
    </div>
    <div class="flex-x">
      <div
        class="title_color_item flex-x flex-center"
        v-for="(item, index) in timeList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorList: [],
      timeList: []
    };
  },
  created() {
    for (let index = 0; index < 24; index++) {
      this.timeList.push(index + " : 00");
    }
    for (let index = 0; index < 48; index++) {
      this.colorList.push({ color: "#808080" });
    }
  },
  methods: {
    getColorData(list) {
      this.colorList = [];
      if (list && list.length) {
        list.forEach(res => {
          for (let i = 0; i < res.boxNum; i++) {
            this.colorList.push({ color: res.color });
          }
        });
      } else {
        for (let index = 0; index < 48; index++) {
          this.colorList.push({ color: "#808080" });
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.title_color_item {
  white-space: nowrap;
  width: 44px;
  // min-width: 46px;
  font-size: 15px;
  margin-right: 8px;
}
.color_item {
  background-color: #808080;
  width: 18px;
  // min-width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 1px solid #808080;
}
</style>
